<template>
  <div>
    <!-- <el-row v-for="(item, index) in miningIndustryDetails" :key="index">
      <template v-if="item.length == 2">
        <template v-for="itemSon in item" :key="itemSon.id">
          <el-col :span="4">
            <div class="font-right">
              {{ itemSon.key }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="font-left">
              {{ itemSon.value }}
            </div>
          </el-col>
        </template>
      </template>
      <template v-else>
        <el-col :span="4">
          <div class="font-right">
            {{ item[0].key }}
          </div>
        </el-col>
        <el-col :span="20">
          <div class="font-left">
            {{ item[0].value }}
          </div>
        </el-col>
      </template>
    </el-row> -->

    <!-- 常规布局-->
    <el-row>
      <el-col :span="4">
        <div class="font-right">矿产品名称</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">
          浙江省三门县西部科创园矿地综合开发利用项目海润街道晏站村、沙柳街道南亭村下银岩山建筑用石料（凝灰岩）矿
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">矿产品编号</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">
          浙江省三门县西部科创园矿地综合开发利用项目海润街道晏站村、沙柳街道南亭村下银岩山建筑用石料（凝灰岩）矿
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">报名开始时间</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">2022</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">报名截止时间</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">2023</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">挂牌开始时间</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">2022</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">挂牌截止时间</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">2023</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">保函开具截止时间</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">2022</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">保函金额</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">1000w</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">出让年限</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">10年</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">所属行政区</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">江西省</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">起始价</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">6000w</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">竞价增价幅度</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">300万</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">采矿权位置</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">三门县</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">开采方式</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">露天开采</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">资源储备</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">600.65万吨</div>
      </el-col>
    </el-row>

    <el-row>
      <!-- <el-col :span="4">
        <div class="font-right">开采矿种</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">建筑用时</div>
      </el-col> -->
      <el-col :span="4">
        <div class="font-right">矿区面积</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">0.3712平方千米</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">设计规范</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">900万吨/年</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">是否有底价</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">有底价</div>
      </el-col>
      <el-col :span="4">
        <div class="font-right">资源储备类型</div>
      </el-col>
      <el-col :span="8">
        <div class="font-left">控制资源量</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">标高</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">上限: + 178 米 下限: + 3.5 米</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="font-right">矿产品编号</div>
      </el-col>
      <el-col :span="20">
        <div class="font-left">
          1.具有法人资格<br />
          2.列入地矿信用等级为E级别
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const miningIndustryDetails = reactive([
  [
    {
      id: "1",
      key: "矿产品名称",
      value:
        "浙江省三门县西部科创园矿地综合开发利用项目海润街道晏站村、沙柳街道南亭村下银岩山建筑用石料（凝灰岩）矿",
    },
  ],
  [
    {
      id: "2",
      key: "矿产品编号",
      value:
        "浙江省三门县西部科创园矿地综合开发利用项目海润街道晏站村、沙柳街道南亭村下银岩山建筑用石料（凝灰岩）矿",
    },
  ],
  [
    {
      id: "3",
      key: "报名开始时间",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "4",
      key: "报名截止时间",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "5",
      key: "保函开具截至时间",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "6",
      key: "保函金额",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
  [
    {
      id: "7",
      key: "出让年限",
      value: "2022年12月19日 08时30分",
    },
    {
      id: "8",
      key: "所属行政区",
      value: "2022年12月29日 11时00分",
    },
  ],
]);
</script>

<style lang="scss" scoped>
.font-right {
  // text-align: right;
  background: #e6f7ff;
  padding: 15px 0;
  border: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font-left {
  text-align: left;
  padding: 15px 0 15px 15px;
  background: #ffffff;
  border: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
